<template>
  <div id="app" style="width: 800px;height: 400px;margin-left: 400px;margin-top: 150px">
    <Cropper
            :default-cut-width="400"
            :default-cut-height="200"
            enable-cut
            :origin-image="staticImage"
            @getImg="getImg"></Cropper>
    <div>
      <img :src="cutImg"/>
      {{cutImg}}
    </div>
  </div>
</template>

<script>
import Cropper from "./components/cropper/Cropper";
import staticImage from "@/assets/long.jpg"
export default {
  name: 'App',
  components: {
    Cropper
  },
  data() {
    return {
      staticImage,
      cutImg: ""
    }
  },
  methods: {
    getImg(v) {
      this.cutImg = v
    }
  }
}
</script>

<style>

body {
  padding: 0;
  margin: 0;
}
</style>
